<template>
    <a-card title="帮助文档" class="documentHelp">
        <template slot="extra">
            <span style="margin-right: 10px;">
                更新时间 ：{{updatedAt}}
            </span>
            <a href="#" v-action:edit="'document'" @click="sumbitDcoument">{{editing ? '保存':'编辑'}}</a>
        </template>
        <a-spin class="loading" size="large" :spinning="spinning">
            <mavon-editor 
                v-model="content" 
                ref="md"
                :defaultOpen="defaultOpen"
                :subfield="subfield"
                :toolbarsFlag="toolbarsFlag" 
                :htmlcode="htmlcode"
                @save="sumbitDcoument"
                @change="change"
            />
        </a-spin>
    </a-card>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import { mapActions } from 'vuex'
export default {
    data () {
        return {
            content: '',
            editing: false,     // true: 编辑中 false: 预览
            subfield: false,    // true： 双栏(编辑预览同屏)， false： 单栏(编辑预览分屏)
            toolbarsFlag: false,    // 工具栏是否显示
            defaultOpen: 'preview', // edit： 默认展示编辑区域 ， preview： 默认展示预览区域
            spinning: false,
            updatedAt: '-',
            htmlcode: false
        }
    },
    components: { mavonEditor },
    methods: {
        ...mapActions(['getHelpDoc', 'editHelpDoc']),
        // 所有操作都会被解析重新渲染
        change (value, render) {
            // console.log(value);
            // render 为 markdown 解析后的结果[html]
        },
        sumbitDcoument () {
            this.editing = !this.editing;
            if (this.editing) {
                this.edit();
            } else {
               this.view();
            }
        },
        edit () {
            this.subfield = true;
            this.defaultOpen = 'edit';
            this.toolbarsFlag = true;
            this.htmlcode = true;
        },
        view () {
            this.editHelpDoc({content: this.content}).then(res=> {
                this.toolbarsFlag = false;
                this.htmlcode = false;
                this.$nextTick(()=>{
                    this.subfield = false;
                    setTimeout(()=>{
                        // this.defaultOpen = 'preview';
                        this.getDcoument();
                        this.$message.success('更新文档成功');
                    },100)
                })
            }).catch(error => {
                this.$message.error('更新文档失败，原因：' + error.msg + '！');
            })
        },
        getDcoument () {
            this.spinning = true
            this.getHelpDoc().then(res=> {
                // this.subfield = false;
                this.defaultOpen = 'preview';
                this.content = res.data.content;
                this.updatedAt = res.data.updatedAt;
                this.spinning = false;
            }).catch(error => {
                this.$message.error('获取文档失败，原因：' + error.msg + '！');
            })
        }
    },
    created () {
        this.getDcoument();
    }
}
</script>

<style scoped>
    /* .documentHelp>>>.ant-card-body {
        height: calc(100% - 57px);
    } */

    .loading {
        height: 100%;
    }
</style>